<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单管理--${site.name}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="${site.logo}">
    <#include "/admin/inc/css.ftl"/>
    <script src="${base}/static/plugins/vue/vue.js" type="text/javascript"></script>
    <link rel="stylesheet" href="${base}/static/css/formDesigner.css" media="all"/>
    <link rel="stylesheet" href="${base}/static/css/formBase.css" media="all"/>
    <link rel="stylesheet" href="${base}/static/formDesigner/css/drag.css" media="all"/>
</head>
<body <#--class="childrenBody"-->>

<div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <li class="layui-nav-item layui-nav-itemed">
                <a class="" href="javascript:;">基本控件</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" class="widget" data-type="button">按钮</a></dd>
                    <dd><a href="javascript:;" class="widget" data-type="span">标签</a></dd>
                    <dd><a href="javascript:;" class="widget" data-type="textbox">文本框</a></dd>
                    <dd><a href="javascript:;" class="widget" data-type="dropdownlist">下拉框</a></dd>
                    <dd><a href="javascript:;" class="widget" data-type="datepicker">时间选择框</a></dd>
                    <dd><a href="javascript:;" class="widget" data-type="hidden">隐藏表单域</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item layui-nav-itemed">
                <a href="javascript:;">面板控件</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" class="widget" data-type="grouppanel">折叠面板</a></dd>
                    <dd><a href="javascript:;" class="widget" data-type="tabstrip">选项卡面板</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">复杂控件</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">列表一</a></dd>
                    <dd><a href="javascript:;">列表二</a></dd>
                </dl>
            </li>
        </ul>
    </div>
</div>
<div class="layui-body">
    <!-- 内容主体区域 -->
    <div id="canvas" class="canvas u-panle auxiliaryLine">

    </div>
</div>


<div id="attr" style="display: none;">

<#--属性面板-->
    <div id="attrPanel" style="height:100% ; overflow-y: scroll">
        <div v-for="(item, key) in attrLayout" v-show="item.show"
             style="margin-top: 5px;border-bottom: solid #96b89e 1px;    line-height: 25px;">
            <div style="width: 70px; display: table-cell; vertical-align: top;">
                <label for="" style="width:70px;margin-right: 5px; display: block;margin-top: 5px;line-height: 16px;">
                    <span style="    box-sizing: border-box;">{{item.name}}:</span>
                </label>
            </div>

            <!--文本框-->
            <div style="display: table-cell;width: auto;position: relative;vertical-align: middle;">
                <input @keyup="refreshCanvas(selectItem,key)" v-if="item.type === 'text'"
                       class="inputCode" style="z-index: 12 ;width: 120px"
                       name="fineui_13" type="text" v-model="selectItem[key]">
                <!--数字输入-->
                <input @change="refreshCanvas(selectItem,key)" @keyup="refreshCanvas(selectItem,key)"
                       v-else-if="item.type === 'number'"
                       class="inputCode" style="z-index: 12 ;width: 120px"
                       name="fineui_13" type="number" v-model.number="selectItem[key]">
                <!--单选框-->
                <input @change="refreshCanvas(selectItem,key)" @keyup="refreshCanvas(selectItem,key)"
                       v-else-if="item.type === 'checkbox'"
                       style="z-index: 12 ;"
                       type="checkbox" id="checkbox" v-model="selectItem[key]">
                <!--下拉框-->

                <select @change="widgetChange(key)"
                        v-else-if="item.type === 'selectList'"
                        class="inputCode" style="z-index: 12 ;width: 120px"
                        v-model="selectItem[key]">
                    <option v-for="(option,colKey) in item.data" :value="colKey">{{option['name']}}</option>
                </select>
            </div>
        </div>
    </div>
<#--事件面板-->
    <div id="eventPanel" style="display: none;z-index:99999;overflow: auto;height: 100%;">
        <div v-for="(item, key) in eventLayout" v-show="item.show"
             style="margin-top: 5px;border-bottom: solid #96b89e 1px;">
            <div style="width: 70px; display: table-cell; vertical-align: top;">
                <label for="" style="width:70px;margin-right: 5px; display: block;margin-top: 5px;line-height: 16px;">
                    <span style="    box-sizing: border-box;">{{item.name}}:</span>
                </label>
            </div>
            <div style="display: table-cell;width: auto;position: relative;vertical-align: middle;">
                <!--文本框-->
                <input @keyup="refreshCanvas(selectItem,key)" v-if="item.type === 'text'"
                       class="inputCode" style="z-index: 12 ;width: 120px"
                       name="fineui_13" type="text" v-model="selectItem[key]">
                <!--数字输入-->
                <input @change="refreshCanvas(selectItem,key)" @keyup="refreshCanvas(selectItem,key)"
                       v-else-if="item.type === 'number'"
                       class="inputCode" style="z-index: 12 ;width: 120px"
                       name="fineui_13" type="number" v-model.number="selectItem[key]">
                <!--单选框-->
                <input @change="refreshCanvas(selectItem,key)" @keyup="refreshCanvas(selectItem,key)"
                       v-else-if="item.type === 'checkbox'"
                       style="z-index: 12 ;"
                       type="checkbox" id="checkbox" v-model="selectItem[key]">
                <!--下拉框-->
                <select
                        v-else-if="item.type === 'selectList'"
                        class="inputCode" style="z-index: 12 ;width: 120px"
                        v-model="selectItem[key]">
                    <option v-for="(option,key) in item.data" :value="key">{{option['name']}}</option>
                </select>
            </div>
        </div>
    </div>
<#--数据源面板-->
    <div id="textCode" style="padding: 3px">

        <table>
            <tbody>
            <tr class="firstRow">
                <td rowspan="1" colspan="4" width="435" valign="top">
                    <textarea class="textCode" readOnly="true" placeholder="内容" v-model="txtForm"></textarea>
                </td>
            </tr>
            <tr>
                <td width="81" valign="right">数据源</td>
                <td rowspan="1" colspan="3" width="333" valign="top"><input class="inputCode" type="text"
                                                                            v-model="inputForm"
                                                                            style=" width: 97%;"></td>
            </tr>
            <tr>
                <td width="81" valign="right">表单ID</td>
                <td width="100" valign="top"><input @keyup="refreshForm" @change="refreshForm" class="inputCode"
                                                    type="text" style=" width: 106px;" v-model="from[0].id"></td>
                <td width="94" valign="right">表单名称</td>
                <td width="97" valign="top"><input @keyup="refreshForm" @change="refreshForm" class="inputCode"
                                                   type="text" style=" width: 107px;" v-model="from[0].title"></td>
            </tr>
            <tr>
                <td width="81" valign="right">宽度</td>
                <td width="100" valign="top"><input id="formWidth" @keyup="refreshForm" @change="refreshForm"
                                                    class="inputCode" type="number" style=" width: 106px;"
                                                    v-model.number="from[0].width">
                </td>
                <td width="94" valign="right">高度</td>
                <td width="97" valign="top"><input id="formHeigth" @keyup="refreshForm" @change="refreshForm"
                                                   class="inputCode" type="number" style=" width: 107px;"
                                                   v-model.number="from[0].height">
                </td>
            </tr>
            </tbody>
        </table>
        <button @click="refreshCanvas" href="#" class="ok" style=" width: 100%;">刷新画布</button>
    </div>
<#--隐藏表单域列表-->
    <div id="hiddens">
        <ul>
            <li v-for="(item, key) in hiddens" style="    text-align: center;background: #eee;border: 1px solid;"><a
                    href="#" @click="hiddenClick(item)" v-bind:data-index="key"
                    v-bind:data-id="item.id">{{item.name}}</a></li>
        </ul>
    </div>


<#--<%--对齐面板--%>-->
    <div id="rulerCtrlPand" style="text-align: center;padding: 5px">
        <div class="alignWidgetBox">
            <a class="alignWidget" @click="alignWidgetEvent($event)" title="顶端对齐" href="javascript:"></a>
            <a class="alignWidget" @click="alignWidgetEvent($event)" title="横向居中对齐" href="javascript:"></a>
            <a class="alignWidget" @click="alignWidgetEvent($event)" title="底端对齐" href="javascript:"></a>
            <a class="alignWidget" @click="alignWidgetEvent($event)" title="左对齐" href="javascript:"></a>
            <a class="alignWidget" @click="alignWidgetEvent($event)" title="垂直居中对齐" href="javascript:"></a>
            <a class="alignWidget" @click="alignWidgetEvent($event)" title="右对齐" href="javascript:"></a>
            <a class="alignWidget" @click="alignWidgetEvent($event)" title="顶端分布" href="javascript:"></a>
            <a class="alignWidget no" @click="alignWidgetEvent($event)" title="横向居中分布" href="javascript:"></a>
            <a class="alignWidget no" @click="alignWidgetEvent($event)" title="底端分布" href="javascript:"></a>
            <a class="alignWidget" @click="alignWidgetEvent($event)" title="左端分布" href="javascript:"></a>
            <a class="alignWidget no" @click="alignWidgetEvent($event)" title="垂直居中分布" href="javascript:"></a>
            <a class="alignWidget no" @click="alignWidgetEvent($event)" title="右端分布" href="javascript:"></a>
        </div>
        <button @click="newMetaBtEvent" class="ok" style=" width: 45%;">新增元数据</button>
        <button @click="saveBtEvent" class="ok" style=" width: 45%;">保存</button>
    </div>

<#--历史记录面板-->
    <div id="history" style="padding: 5px;">
        <ul>
            <li v-for="(item, key) in history" style="    text-align: center;background: #eee;border: 1px solid;"><a
                    href="#" @click="revoke($event)" v-bind:data-index="key">{{item.name}}</a></li>
        </ul>

    </div>

</div>


<#include "/admin/inc/script.ftl"/>
<script src="${base}/static/js/um.js" type="text/javascript"></script>
<script src="${base}/static/js/umForm.js" type="text/javascript"></script>

<!--ligerUI-->
<link href="${base}/static/plugins/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css"/>
<script src="${base}/static/plugins/ligerUI/js/core/base.js" type="text/javascript"></script>
<script src="${base}/static/plugins/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>
<script src="${base}/static/plugins/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>


<script>
    var recodeId = '${form.id}';
    var formId = '${form.f001}';
    var formName = '${form.f003}';
    var formData = '${form.f002}';


    if (formId === '')
        formId = new Date().getTime();
    if (formName === '')
        formName = 'NewForm';
    if (formData === '')
        formData = `[{"tableStyle":false,"tableStyle": false,"header":false,"type":"form","id":"form","cls":"form","renderTo":"#from","width":1250,"height":700,"layout":"absolute","bodyPadding":5,"collapsible":true,"title":"表单 2","items":[{"type":"textbox","x":238,"y":53,"cls":"widgetItem","name":"basepath","id":"basepathWidget","width":200,"height":20,"labelWidth":120,"fieldLabel":"可以，很厉害","value":""}]}]`;

</script>

<#--设计器相关-->
<script src="${base}/static/formDesigner/js/widget.js" type="text/javascript"></script>
<script src="${base}/static/formDesigner/js/drag.js" type="text/javascript"></script>
<script src="${base}/static/formDesigner/js/index.js" type="text/javascript"></script>
</body>
</html>